<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 定义文档类型为HTML5 -->
    <meta charset="UTF-8" />
    <!-- 设置页面字符编码为UTF-8，支持中文等多种字符 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 设置视口，让页面在移动设备上正确显示 -->
    <title>对象扁平化示例</title>
    <!-- 页面标题 -->
  </head>
  <body>
    <!-- 页面主体内容区域 -->
    <h1>对象扁平化函数演示</h1>
    <p>打开浏览器控制台查看扁平化结果</p>
  </body>
  <script>
    // 定义对象扁平化函数，将嵌套对象转换为单层对象
    function flattenObject(obj) {
      const result = {}
      function travere(val, path = "") {
        if (typeof val !== "object" || val == null) {
          result[path] = val
        } else if (Array.isArray(val)) {
          val.forEach((item, index) => {
            travere(item, `${path}[${index}]`)
          })
        } else {
          Object.keys(val).forEach((key) => {
            travere(val[key], path ? `${path}.${key}` : key)
          })
        }
      }

      travere(obj, "")
      return result
    }

    // 创建测试用的嵌套对象
    const obj = {
      a: 1, // 简单的数值属性
      b: [1, 3, { a: 2, b: 3 }], // 包含对象的数组
      c: { d: 2, e: 3 }, // 嵌套对象
      d: 4, // 另一个简单属性
    }

    // 调用扁平化函数并在控制台输出结果
    // 预期输出：
    // {
    //   "a": 1,
    //   "b[0]": 1,
    //   "b[1]": 3,
    //   "b[2].a": 2,
    //   "b[2].b": 3,
    //   "c.d": 2,
    //   "c.e": 3,
    //   "d": 4
    // }
    console.log(flattenObject(obj))
  </script>
</html>
